﻿.brake1 {
    /*border: solid 2px red;*/
    margin-top: 70px; /* Separación hacia abajo */
    width: 100vw; /* Ancho completo de la ventana del navegador */
    height: 300px; /* Altura fija del slider */
    overflow: hidden;
    position: relative;
    background-color: #000000;
    box-sizing: border-box; /* Incluir padding en el ancho total */
    margin-left: calc(50% - 50vw); /* Ajuste para centrar correctamente */
    margin-right: calc(50% - 50vw); /* Ajuste para centrar correctamente */
}

/*---------------------------------------------------------------------------------------- brake1 */

.column-brake1 {
    /*border: solid 5px blue;*/
    display: flex;
    flex-direction: column; /* Apila los elementos verticalmente */
    justify-content: center; /* Centra verticalmente dentro del contenedor */
    align-items: center; /* Centra horizontalmente dentro del contenedor */
    /*    border: 1px solid #000000;*/
    /*padding: 20px;*/
    text-align: center;
    width: 100%;
    height: 100%;
    /* IMG Styles*/
    background-size: contain; /*Ajusta la imagen para cubrir todo el contenedor */
    background-position: center; /*Centra la imagen dentro del contenedor */
    background-repeat: no-repeat;
}

/*---------------------------------------------------------------------------------------- column-brake1 */

.column-brake1 .a-buttonfrases {
   /* border: solid 5px green;*/
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;

    display: flex; /* ← NECESARIO */
    flex-direction: column; /* Para apilar icono + texto */
    justify-content: center; /* ← Centra verticalmente */
    align-items: center; /* ← Centra horizontalmente */
}


/*---------------------------------------------------------------------------------------- a-buttonfrases */

.frases-iconshare2 {
    width: 20px;
    height: 20px;
    filter: invert(1);
    position: absolute; /* Posiciona el ícono de manera absoluta dentro del contenedor */
    /* Alinea el ícono en la parte superior del contenedor */
}

.frases-iconshare2 {
    right: 20%; /* Alinea el ícono a la derecha del contenedor */
    bottom: 10%
}


.columnbrake1-A {
    /*border: solid 5px yellow;*/
    width: 100%;
    color: red;
    text-align: center;
    font-size: 18px;
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 10px;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    /* height: 100%;  <-- QUITADO */
}

    .columnbrake1-A::after {
        content: "";
        display: block;
        width: 50%;
        height: 3px;
        background: #fff;
        margin: 0 auto;
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
    }

.frase-autor, .autor {
    /*border: solid 5px yellow;*/
    width: 100%;
    text-decoration: none;
    color: #fff;
    margin: 0;
}

.frase-autor {
    margin-top: auto; /* Ahora sí funciona */
}


@media (max-width: 768px) {

    .brake1 {
        height: 200px;
    }

    .column-brake1 {
        width:100%;
        height: 100%;
        margin: 0 auto;
        color: red;
    }

    .frase-autor, .autor {
        /*border: solid 5px yellow;*/
        width: 95%;
        font-size: 10px;
        line-height: 1.3;
        text-align: center;
        padding-left: 20px;
        padding-right: 20px;
    }

    .frases-iconshare2 {
        display: none;
    }

}
